import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import React from "react";
import { routes, routesProps } from "./list";
import KeepAlive, { AliveScope } from "react-activation";
import Auth from "@/utils/auth";
import { useSelector } from "react-redux";

/**
 *  路由方法 自定义规则
 * @param routerList 路由列表
 * item.redirect 如果没有匹配到对应的路由 就重定向到404页面
 * Auth 判断token是否存在或者过期 如果是的 重定向到登录页面
 * @returns 
 */
// const userRole = JSON.parse(localStorage.getItem("auth") as string) ? JSON.parse(localStorage.getItem("auth") as string).role : "";
const renderRouter = (routerList: routesProps[]) => {
    const store = useSelector((state: any) => state.userinfo);
    const userRole = Object.keys(store.userInfo).length > 0 ? store.userInfo.role : "";
    
    return routerList.map((item, ind) => {
        const { path, children, actived, roles } = item;

        // 检查当前路由是否有权限
        if (roles && roles.length > 0 && !roles.includes(userRole)) {
            return null;
        }

        // 判断是否有子路由
        return (
            <Route key={path} path={path}
                element={item.redirect ?
                    <Navigate to="/notFound"></Navigate>
                    :
                    // <Suspense fallback={<Loading />}></Suspense> 同步加载不需要使用Suspense
                    <Auth>
                        {
                            actived ? (<KeepAlive id={path}>
                                <item.element />
                            </KeepAlive>) : <item.element />
                        }
                    </Auth>
                }
            >
                {children && renderRouter(children)}
            </Route>
        )
    })
};

// 在函数组件中，使用 <BrowserRouter> 组件将整个应用程序包装起来，以启用路由功
// 渲染路由
// 使用 <Suspense> 组件包装路由配置。<Suspense> 组件是 React 提供的用于懒加载组件的机制，可在组件加载时显示一个回退（fallback）元素，以提供更好的用户体验.
const Routers = () => {
    {/* Routes代替Switch写法 */ }
    return (
        <BrowserRouter>
            <AliveScope>
                <Routes>
                    {renderRouter(routes)}
                </Routes>
            </AliveScope>
        </BrowserRouter >
    );
};

// 通过 React.memo() 函数对 Routers 组件进行包装，以优化性能。React.memo() 是 React 提供的一个高阶函数，用于对纯函数组件进行浅比较的优化，以避免不必要的重新渲染。
export default React.memo(Routers);